<template>
	<div class="mains">
		<div class="header">
			<div class="headers" v-for="item in list" :key="item.id">
				<div class="jieshao">
					<div class="box1">
						<img :src="item.wx_total" alt="">
					</div>
					<div class="box2">
						<div>
							<h3>{{item.true_name || "暂无"}}</h3>
						</div>

						<div>
							<p>微信号：{{item.id || ""}}</p>
						</div>
					</div>
				</div>
				<div class="xiaoshoue">
					<div class="money">
						店铺数：<span class="red">{{item.shop_count}}</span>
					</div>
				</div>
			</div>
			<u-toast ref="uToast" />
			<u-modal v-model="show" :content="content"></u-modal>
			<u-modal v-model="upshow" :content="upshowtext"></u-modal>

		</div>

		<div>
			<div class="addkehu">
				<navigator url="../shop/add1">添加客户</navigator>
			</div>
		</div>
			
	</div>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				token: "",
				agent_id: "",
				list:[],
				page:1,
				limit:10,
				jiazai:"",
				show:false,
				upshow:false,
				content:"您要添加更多的客户了",
				upshowtext:"重新加载中"
			}
		},
		methods: {
				onPullDownRefresh() {
					// 上啦记载
					// this.upshow=!this.upshow
					// this.show=!this.show
						this.$refs.uToast.show({
							title: '重新加载成功',
							type: 'success',
						})
					
						this.go();
					},
				getagent_id(){
					var that=this
					wx.getStorage({
					  key: 'agent_id',
					  success (res) {
					    console.log(res.data)
						that.agent_id=res.data
						that.go()
					  }
					})
					
				},
			go(){
				let that = this
					this.$flyio.get('v1.Agent/CustomerList', {						agent_id:that.agent_id,						page:that.page,						limit:that.limit					}).then((ret) => {						console.log(ret)
						console.log("查询客户列表的结果");						that.list=ret.data.data					})					.catch((e) => {						console.log(e)					})
			},
			
		},
		onLoad() {
			
		},
		onReady() {
			var that=this
			wx.showLoading({
				  title: '加载中',
				  success(){
					 that.getagent_id()
				  }
				})
			setTimeout(function () {
			  wx.hideLoading()
			}, 1000)
		},
		onReachBottom(e) {
				if(this.jiazai==false){
					return
				}
					var that=this
					console.log('触底加载更多');
					that.page++
					// that.limit=that.limit+10
					// console.log(that.limit)
					// console.log(that.page)
					this.status = 'loading';
					
					that.$flyio.get('v1.Agent/CustomerList', {
							agent_id:that.agent_id,
							page: that.page,
							limit: that.limit,
						}).then((res) => {
								console.log(res.data.data)
								if(res.data.data.length==0){
									that.jiazai=false
									setTimeout(() => {
										that.status = 'nomore';
									}, 2000)
									that.$refs.uToast.show({
										title: '成功加载更多',
										type: 'success',
									})
								}
								that.list=[...that.list,...res.data.data]
							uni.stopPullDownRefresh();
						})
						.catch((e) => {
							console.log(e)
						})

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.addkehu {
		border: 1px solid red;
		height: 86upx;
		width: 663upx;
		margin: 0 auto;
		color: $red;
		// background-color: #FFFFFF;
		line-height: 86upx;
		flex: 1;
		text-align: center;
		// justify-self: flex-end;
		// position: absolute;
		// left: 50%;
		// transform: translateX(-50%);
		// bottom: 31upx;
		margin-bottom: 51upx;
		justify-content: flex-end;
	}

	.mains {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: $gary;
		// border: 1px solid red;
		justify-content: space-between;

		// justify-content: space-around;


	}

	span {
		color: red
	}

	p {
		font-size: 21upx;
		color: #999999;
	}

	h3 {
		font-size: 29upx;
	}

	image,
	img {
		background-color: gainsboro;
		border-radius: 50%;
		width: 82upx;
		height: 82upx;
		// border: 1px solid red;
	}

	.headers {
		margin-bottom: 16upx;
		height: 148upx;
		background-color: $f;
		display: flex;
		justify-content: space-between;
		padding-left: 24upx;
		padding-right: 30upx;

		align-items: center;

		.jieshao {
			display: flex;

			.box2 {
				margin-left: 20upx;
				// background-color: red;
			}
		}

		.xiaoshoue {
			font-size: 24upx;
			text-align: center;
			line-height: 100upx;
		}
	}
</style>
